<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12" class="el-col">
        <div>
          <el-form
            ref="map"
            :inline="true"
            :rules="rules"
            :model="map"
            size="mini"
          >
            <el-form-item label="搜索" prop="id">
              <el-input v-model="map.neiron" clearable placeholder="可搜索产品配料名称和类型" />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="querylist"
              >查询</el-button>
              <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
              <el-button
                type="primary"
                icon="el-icon-circle-plus-outline"
                @click="handlecreate"
              >添加</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table
          v-loading="treeLoading"
          :data="tree.slice((currentPage-1)*pagesize,currentPage*pagesize)"
          element-loading-text="Loading"
          border
          fit
          height="570"
          highlight-current-row
          row-key="id"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="index" align="center" label="序号" width="50" />
          <el-table-column label="产品类型" width="150" align="center" prop="productID" />
          <el-table-column label="产品配料名称" width="150" align="center" prop="productMaterialDescribe" />
          <el-table-column label="产品数量" width="150" align="center" prop="number" />
          <el-table-column class-name="status-col" label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="handleEdit(scope.row.id)">
                修改
              </el-button>
              <!-- <el-button type="danger" size="small" @click="Coursedelete(scope.row.id)">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[15, 30]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tree.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        <!-- 添加按钮页面 -->
        <el-dialog
          :visible.sync="createVisible"
          width="30%"
          :before-close="
            () => {
              createVisible = false
            }
          "
          :show-close="false"
        >
          <el-form
            ref="menuForm"
            :model="menuForm"
            :rules="rules"
            label-width="6vw"
          >
            <el-form-item label="产品类型">
              <el-input
                v-model="menuForm.productID"
                placeholder="请输入"
              />
            </el-form-item>
            <el-form-item label="产品配料名称">
              <el-input
                v-model="menuForm.productMaterialDescribe"
                placeholder="请输入"
              />
            </el-form-item>
            <el-form-item label="产品数量">
              <el-input
                v-model.number="menuForm.number"
                placeholder="请输入"
              />
            </el-form-item>
          </el-form>
          <div>
            <el-button @click="cancelMenu">取消</el-button>
            <el-button type="primary" @click="createMenu">确定</el-button>
          </div>
        </el-dialog>
        <!-- 修改按钮 -->
        <el-dialog
          :visible.sync="editVisible"
          width="30%"
          :before-close="
            () => {
              editVisible = false
            }
          "
          :show-close="false"
        >
          <el-form
            ref="editmenuForm"
            :model="editmenuForm"
            :rules="rules"
            :label-position="labelPosition"
            label-width="7vw"
          >
            <el-form-item label="产品配料名称" prop="productMaterialDescribe">
              <el-input v-model="editmenuForm.productMaterialDescribe" />
            </el-form-item>
            <el-form-item label="产品类型名称" prop="productID">
              <el-input v-model="editmenuForm.productID" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="配料数量" prop="number">
              <el-input v-model="editmenuForm.number" placeholder="请输入" />
            </el-form-item>
          </el-form>
          <div>
            <el-button @click="editcancelMenu">取消</el-button>
            <el-button type="primary" @click="editMenu()">确定</el-button>
          </div>
        </el-dialog>
      </el-col>
      <el-col :span="11">
        <el-select v-model="value" placeholder="请选择" @change="huatu">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.productID"
            :value="item.productID"
          />
        </el-select>
        <div id="main" class="huatu" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { querytubiao, getproductsmaterial, selectname } from '@/api/nested'
import { insertProductsmaterial, postUpData } from '@/api/nested'
import { query } from '@/api/nested'
import { getToken } from '@/utils/auth'
import * as echarts from 'echarts'
// import service from '@/utils/request'
// import axios from 'axios'
export default {
  data() {
    return {
      value: 'a',
      labelPosition: 'left',
      options: [],
      option: {
        title: {
          text: '耗材表',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      currentPage: 1, // 初始页
      pagesize: 15, //    每页的数据
      tree: [], // 页面数据
      rulesname: '', // 规则名称
      createVisible: false,
      editVisible: false,
      listLoading: true,
      input: '',
      filterText: '',
      myChart: null,
      menuForm: {
      },
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      form: {
        delivery: false
      },
      editmenuForm: { // 修改部分
        id: 0
      },
      rules: {
        phoneId: [
          {
            require: true,
            type: 'number',
            message: '请输入数字',
            trigger: 'blur'
          }
        ]
      }, // 验证规则配置
      map: {
        neiron: '' // 搜索内容
      }, //  表单提交
      multipleSelection: [],
      multipleSelections: []
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val)
    }
  },
  created() {
    this.fetchData()
  },
  mounted() {
    this.huatu()
  },
  methods: {
    huatu() {
      if (this.myChart != null) {
        this.myChart.dispose() // 销毁
      }
      querytubiao({ productID: this.value }).then((response) => {
        console.log(response.data)
        this.option.series[0].data = []
        for (var item in response.data) {
          this.option.series[0].data.push({ value: response.data[item].number, name: response.data[item].productMaterialDescribe })
        }
        console.log(this.option.series[0].data)
        var chartDom = document.getElementById('main')
        this.myChart = echarts.init(chartDom)
        this.option.title.text = this.value + '耗材表'
        this.option && this.myChart.setOption(this.option)
      })
    },
    // 后端数据部分
    shujuqxi(response) { // 数据清洗
      var a = response.data
      if (a != null) {
        this.tree = a
      }
    },
    fetchData() {
      this.treeLoading = true
      getproductsmaterial({ token: getToken() }).then((response) => {
        // console.log(response)
        this.shujuqxi(response)
        this.treeLoading = false
      })
      selectname().then((response) => {
        this.options = response.data
      })
    },
    // 分页
    handleSelectionChange(val) {
      this.multipleSelection = val
      // console.log(this.multipleSelection)
    },
    handleSizeChange: function(size) {
      this.pagesize = size
      // console.log(this.pagesize) // 每页下拉显示数据
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      // console.log(this.currentPage) // 点击第几页
    },
    reset() {
      this.map.neiron = ''
    },
    querylist() {
      this.$refs['map'].validate((valid) => {
        if (valid) {
          if (this.map.neiron === '') {
            this.fetchData()
            this.$message({
              type: 'success',
              message: '操作成功'
            })
          } else {
            query({ neiron: this.map.neiron }).then((response) => {
              console.log(response)
              this.shujuqxi(response)
            })
          }
        } else {
          console.log('error submit!')
          return false
        }
      })
    },
    handlecreate() { // 获取产品类型
      this.createVisible = true
    },
    setrulesname(data, index) { // 设置规则内容
      this.menuForm[this.rulesnames[index]] = data
    },
    cancelMenu() {
      this.createVisible = false
    },
    createMenu() {
      this.$refs['menuForm'].validate((valid) => {
        if (valid) {
          insertProductsmaterial(this.menuForm).then((response) => {
            this.fetchData()
            this.$message({
              type: 'success',
              message: '操作成功'
            })
          })
          this.createVisible = false
        } else {
          console.log('error submit!')
          return false
        }
      })
    },
    editcancelMenu() {
      this.editVisible = false
      // console.log(this.editmenuForm)
    },
    canceleditMenu() {
      // console.log(this.editmenuForm)
      this.editVisible = false
    },
    editMenu() { // 修改按钮
      this.$refs['editmenuForm'].validate((valid) => {
        if (valid) {
          postUpData(this.editmenuForm).then((response) => {
            this.fetchData()
            this.$message({
              type: 'success',
              message: '操作成功'
            })
          })
        } else {
          console.log('error submit!')
          return false
        }
      })
      this.editVisible = false
    },
    handleEdit(id) { // 修改
      if (id != null) {
        this.editmenuForm.id = id
        this.editVisible = true
      } else {
        // console.log('没有操作权限')
        alert('没有操作权限')
      }
      // this.$refs.update.open();
    }
  }
}
</script>

<style lang="scss">
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
    margin: 1%;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .huatu{
    height: 400px;
    width: 400px;
    margin-top: 10%;
  }

</style>

<style lang="scss" scoped>

</style>
